<template>
  <div class="app-container">
    <div class="change">
      <p>
        <span>自定义标题1</span>
        <el-input v-model="tempData.titl1" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题1" />
      </p>
      <p>
        <span>自定义标题2</span>
        <el-input v-model="tempData.titl2" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题2" />
      </p>
      <p>
        <span>自定义标题3</span>
        <el-input v-model="tempData.titl3" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题3" />
      </p>
      <p>
        <span>自定义标题4</span>
        <el-input v-model="tempData.titl4" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题4" />
      </p>
      <p>
        <span>自定义标题5</span>
        <el-input v-model="tempData.titl5" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题5" />
      </p>
      <p>
        <span>自定义标题6</span>
        <el-input v-model="tempData.titl6" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题6" />
      </p>
      <p>
        <span>自定义标题7</span>
        <el-input v-model="tempData.titl7" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题7" />
      </p>
      <p>
        <span>自定义标题8</span>
        <el-input v-model="tempData.titl8" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题8" />
      </p>
      <p>
        <span>自定义标题9</span>
        <el-input v-model="tempData.titl9" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题9" />
      </p>
      <p>
        <span>自定义标题10</span>
        <el-input v-model="tempData.titl10" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题10" />
      </p>
      <p>
        <span>自定义标题11</span>
        <el-input v-model="tempData.titl11" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题11" />
      </p>
      <p>
        <span>自定义标题12</span>
        <el-input v-model="tempData.titl12" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题12" />
      </p>
      <p>
        <span>自定义标题13</span>
        <el-input v-model="tempData.titl13" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题13" />
      </p>
      <p>
        <span>自定义标题14</span>
        <el-input v-model="tempData.titl14" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题14" />
      </p>
      <p>
        <span>自定义标题15</span>
        <el-input v-model="tempData.titl15" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题15" />
      </p>
      <p>
        <span>自定义标题16</span>
        <el-input v-model="tempData.titl16" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题16" />
      </p>
      <p>
        <span>自定义标题17</span>
        <el-input v-model="tempData.titl17" :disabled="islook" type="text" class="userselect" placeholder="请输入自定义标题17" />
      </p>
    </div>
		<div class="submits">
		  <el-button class="save" size="small" type="primary" :loading="loading" @click="save">保存</el-button>
		  <el-button class="nosave" size="small" type="info" @click="nosave">取消</el-button>
		</div>
  </div>
</template>

<script>
let parentId = null,iswrite = false;
import { getTestYuanfuliao,addTestYuanfuliao,updateTestYuanfuliao,deleteTestYuanfuliao } from '@/api/testcenter'
export default {
  data(){
    return{
      tempData: {},
      loading: false,
      writeOradd: 0, //判断是0新增还是1修改
      islook: false
    }
  },
  mounted(){
    // 获取标题内容
    if(this.$route.params.look){
      this.islook = true
    }else{
      this.islook = false
    }
    if(this.$route.params.id){
      parentId = this.$route.params.id
      this.getlist(this.$route.params.id)
    }
  },
  methods:{
    /**
     * 获取标题内容
     */
    getlist(id){
      getTestYuanfuliao({yfid: id}).then(res => {
        console.log(res)
        if(res.data && res.data.length){
          this.tempData = res.data[0]
          iswrite = true
        }else{
          iswrite = false
        }
      })
    },
    /**
     * 保存发货单
     */
    save(){
      // 如果对象为空，直接返回
      if(JSON.stringify(this.tempData) === '{}'){
        this.$message({
          message: '请填写相关信息！',
          type: 'warning'
        })
        return
      }
      this.loading = true
      //0为新增操作
      console.log(iswrite)
      console.log(this.tempData)
      if(!iswrite){
        this.tempData.yfid = parentId
        addTestYuanfuliao(this.tempData).then(res => {
          console.log(res)
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.go(-1)
        }).catch(() => {
          this.loading = false
        })
      }else{
        // 1是编辑修改操作
        delete this.tempData.insertTime
        delete this.tempData.updateTime
        delete this.tempData.deleteId
        updateTestYuanfuliao(this.tempData).then(res => {
          console.log(res)
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.$router.go(-1)
        }).catch(() => {
          this.loading = false
        })
      }
      
    },
    nosave(){
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="scss">
  .submits {
	  display: flex;
		background: #fff;
	  padding: 20px 20px;
		border-radius: 8px;
		margin-top: 20px;
		// border-top: 1px solid #ccc;
	  justify-content: flex-end;
	  align-items: center;
	  > div {
	    width: 80px;
	    height: 32px;
	    text-align: center;
	    line-height: 32px;
	    color: #fff;
	    font-size: 14px;
	    border-radius: 4px;
	    margin-left: 30px;
	    cursor: pointer;
	  }
	  .save {
	    background: #18a05e;
	  }
	  .nosave {
	    background: #999;
	  }
	}
  .change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px;
	  padding: 20px;
	  > p {
	    width: 33%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 120px;
	      text-align: right;
	      padding-right: 15px;
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	}
</style>